import React from 'react';
import { ChevronLeft, Award, Lock } from 'lucide-react';
import { useNavigate } from 'react-router-dom';

interface Medal {
  id: number;
  name: string;
  description: string;
  icon: string;
  unlocked: boolean;
  unlockedAt?: string;
}

const medals: Medal[] = [
  {
    id: 1,
    name: '春雷先锋',
    description: '参与3次春雷行动',
    icon: '🌟',
    unlocked: true,
    unlockedAt: '2024-03-15'
  },
  {
    id: 2,
    name: '团队精神',
    description: '累计参与10次团队训练',
    icon: '🏆',
    unlocked: true,
    unlockedAt: '2024-02-20'
  },
  {
    id: 3,
    name: '优秀组织者',
    description: '成功组织5次训练活动',
    icon: '👑',
    unlocked: false
  },
  {
    id: 4,
    name: '完美记录',
    description: '训练评分达到5颗星',
    icon: '⭐',
    unlocked: true,
    unlockedAt: '2024-01-10'
  },
  {
    id: 5,
    name: '活跃达人',
    description: '连续10天查看训练记录',
    icon: '🔥',
    unlocked: false
  },
  {
    id: 6,
    name: '分享专家',
    description: '分享100张训练照片',
    icon: '📸',
    unlocked: false
  },
  {
    id: 7,
    name: '视频达人',
    description: '上传10个训练视频',
    icon: '🎥',
    unlocked: false
  },
  {
    id: 8,
    name: '年度标兵',
    description: '获得年度最佳团队成员',
    icon: '🎯',
    unlocked: true,
    unlockedAt: '2024-01-01'
  }
];

export default function MyMedalsPage() {
  const navigate = useNavigate();
  const unlockedMedals = medals.filter(medal => medal.unlocked);
  const lockedMedals = medals.filter(medal => !medal.unlocked);

  return (
    <div className="min-h-screen bg-gray-50">
      <div className="bg-white px-4 py-3 flex items-center border-b sticky top-0 z-10">
        <button onClick={() => navigate('/profile')} className="mr-4">
          <ChevronLeft className="w-6 h-6 text-gray-600" />
        </button>
        <h1 className="text-xl font-semibold">我的勋章</h1>
      </div>

      <div className="p-4 space-y-6">
        {/* 已获得的勋章 */}
        {unlockedMedals.length > 0 && (
          <div>
            <h2 className="text-lg font-semibold text-gray-900 mb-4 flex items-center">
              <Award className="w-5 h-5 mr-2 text-blue-500" />
              已获得的勋章
            </h2>
            <div className="grid grid-cols-2 gap-4">
              {unlockedMedals.map(medal => (
                <div
                  key={medal.id}
                  className="bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl p-4"
                >
                  <div className="flex items-center justify-between mb-3">
                    <span className="text-2xl">{medal.icon}</span>
                  </div>
                  <h3 className="text-lg font-semibold text-blue-600 mb-1">
                    {medal.name}
                  </h3>
                  <p className="text-sm text-gray-600 mb-3">{medal.description}</p>
                  <div className="text-xs text-blue-500">
                    获得时间：{medal.unlockedAt}
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* 未获得的勋章 */}
        {lockedMedals.length > 0 && (
          <div>
            <h2 className="text-lg font-semibold text-gray-900 mb-4 flex items-center">
              <Lock className="w-5 h-5 mr-2 text-gray-400" />
              未获得的勋章
            </h2>
            <div className="grid grid-cols-2 gap-4">
              {lockedMedals.map(medal => (
                <div
                  key={medal.id}
                  className="bg-gray-50 rounded-xl p-4"
                >
                  <div className="flex items-center justify-between mb-3">
                    <span className="text-2xl opacity-50">{medal.icon}</span>
                    <Lock className="w-4 h-4 text-gray-400" />
                  </div>
                  <h3 className="text-lg font-semibold text-gray-400 mb-1">
                    {medal.name}
                  </h3>
                  <p className="text-sm text-gray-500">{medal.description}</p>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}